<template>
  <Form :model="formItem" :label-width="80">
    <FormItem label="任务名称">
      <Input v-model="formItem.input" placeholder="Enter something..."></Input>
    </FormItem>
    <FormItem label="任务详情">
      <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
    </FormItem>
    <FormItem label="时间">
      <DatePicker type="datetimerange" placeholder="Select date and time" style="width: 300px"></DatePicker>

    </FormItem>

    <FormItem label="责任人">
      <Select v-model="model11" filterable style="width:260px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>

    <FormItem label="参与者">
      <Select v-model="model10" multiple filterable style="width:260px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>

    <FormItem>
      <Dropdown trigger="click" @on-click="selectColor">
        <a href="javascript:void(0)">
          <Icon :size="22" type="record" :color="formItem.color"/>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem v-for="(item, index) in themeList" :key="index" :name="item.element">
            <Row type="flex" justify="center" align="middle">
              <span><Icon :size="22" type="record" :color="item.element"/></span>
            </Row>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>

    </FormItem>
    <FormItem label="进度">
      <Slider v-model="formItem.slider" :step="10"></Slider>
    </FormItem>
    <FormItem label="附件">
      <Upload
        multiple
        action="//jsonplaceholder.typicode.com/posts/">
        <Button type="ghost" icon="ios-cloud-upload-outline">Upload files</Button>
      </Upload>
    </FormItem>
    <FormItem label="备注">
      <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
    </FormItem>
    <card>
      <p slot="title">
        <Icon type="ios-list-outline"></Icon>
        子任务
      </p>
      <FormItem
        v-for="(item, index) in formDynamic.items"
        v-if="item.status"
        :key="index"
        :label="'任务 ' + item.index"
        :prop="'items.' + index + '.value'"
        :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
        <Row>
          <Col span="18">
          <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
          </Col>
          <Col span="4" offset="1">
          <Button type="ghost" @click="handleRemove(index)">删除</Button>
          </Col>
        </Row>
      </FormItem>

      <FormItem>
        <Row>
          <Col span="12">
          <Button type="dashed" long @click="handleAdd" icon="plus-round">添加子任务</Button>
          </Col>
        </Row>
      </FormItem>
    </card>
    <card :style="{backgroundColor:'#eee',marginTop:'20px'}">
      <p slot="title">
        <Icon type="ios-list-outline"></Icon>
        动态
      </p>
      <ul>
        <li v-for="item in movieList" style="overflow:hidden;padding:10px 0">
          <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" :style="{float:'left'}"/>
          <div style="overflow:hidden;padding-bottom:10px">
            <a :href="item.url" target="_blank" style="color:black;padding-left:8px">
              {{ item.name }}
              <p style="float:right;color:#888888;font-size:12px">
                <span><Tag checkable color="blue">编辑</Tag></span>
                <span><Tag checkable color="red">删除</Tag></span>
                {{item.zsstime}}
              </p>
            </a>
            <p style="color:#949494;font-size:12px;padding-left:8px">{{item.text}}</p>
          </div>
        </li>

        <li v-for="item in lingmovieList" style="overflow:hidden;padding:5px 0">
          <Icon type="person" :style="{fontSize:'25px',paddingRight:'15px',color:'#A1A1A1'}"></Icon>
          <span style="color:#888888;font-size:14px">{{item.name}}认领了任务</span>
          <span style="float:right;color:#888888;font-size:12px;padding-top:5px">{{item.zsstime}}</span>
        </li>
      </ul>
    </card>

  </Form>
</template>
<script>
  import UserSelect from "../../main-components/user-select/user-select.vue";

  export default {
    components: {UserSelect},
    data () {
      return {
        movieList: [
          {
            name: '李德杰修改了任务',
            url: 'https://movie.douban.com/subject/1292052/',
            zsstime:'2018.3.16 10:32',
            text:'修改内容情况修改内容情况修改内容情况'
          },
          {
            name: '张占占修改了任务',
            url: 'https://movie.douban.com/subject/1292052/',
            zsstime:'2018.3.16 10:32',
            text:'修改内容情况修改内容情况修改内容情况'
          },
          {
            name: '李家家修改了任务',
            url: 'https://movie.douban.com/subject/1292052/',
            zsstime:'2018.3.16 10:32',
            text:'修改内容情况修改内容情况修改内容情况'
          }
        ],
        lingmovieList:[
          {
            name: '土豆',
            zsstime:'2018.3.16 10:32',
            text:'修改内容情况修改内容情况修改内容情况'
          },
          {
            name: '地瓜',
            zsstime:'2018.3.16 10:32',
            text:'修改内容情况修改内容情况修改内容情况'
          },
          {
            name: '芋头',
            zsstime:'2018.3.16 10:32',
            text:'修改内容情况修改内容情况修改内容情况'
          }
        ],
        randomMovieList: [],
        cityList: [
          {
            value: 'New York',
            label: '李德杰'
          },
          {
            value: 'London',
            label: '张占刚'
          },
          {
            value: 'Sydney',
            label: '周强'
          },
          {
            value: 'Ottawa',
            label: '李家宏'
          },
          {
            value: 'Paris',
            label: '马春彦'
          },
          {
            value: 'Canberra',
            label: '孙路'
          }
        ],
        model10: [],
        model11: [],
        themeList: [
        {
          name: 'black_b',
          element: '#2d8cf0'
        },
        {
          name: 'black_g',
          element: '#00a854'
        },
        {
          name: 'black_y',
          element: '#e96500'
        },
        {
          name: 'black_r',
          element: '#e43e31'
        }
      ],
        formItem: {
          input: '部署实施',
          color: 'red',
          select: '',
          radio: 'male',
          checkbox: [],
          switch: true,
          date: '',
          time: '',
          slider: 30,
          textarea: ''
        },
        index: 1,
        formDynamic: {
          items: [
            {
              value: '',
              index: 1,
              status: 1
            }
          ]
        }
      }
    },
    mounted () {
      this.changeLimit();
    },
    methods:{
      selectColor(c){
        this.formItem.color = c
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      handleAdd () {
        this.index++;
        this.formDynamic.items.push({
          value: '',
          index: this.index,
          status: 1
        });
      },
      handleRemove (index) {
        this.formDynamic.items[index].status = 0;
      },
      changeLimit () {
        function getArrayItems(arr, num) {
          const temp_array = [];
          for (let index in arr) {
            temp_array.push(arr[index]);
          }
          const return_array = [];
          for (let i = 0; i<num; i++) {
            if (temp_array.length>0) {
              const arrIndex = Math.floor(Math.random()*temp_array.length);
              return_array[i] = temp_array[arrIndex];
              temp_array.splice(arrIndex, 1);
            } else {
              break;
            }
          }
          return return_array;
        }
        this.randomMovieList = getArrayItems(this.movieList, 5);
      }
    }
  }
</script>
<style scoped>
 
</style>
